<template>
	<div>
    <el-card shadow="never">
      <div style="display: inline-flex;width: 100%;">
        <div class="edu-page-title" style="font-size: 20px; margin-bottom: 32px;">{{$t('teachers.batchEditTeachers')}}</div>
        <el-button style="margin-inline-start: auto;" @click="back">{{$t('common.btn.back')}}</el-button>
      </div>
      <el-table :data="teacherInfo" style="width: 90%" :border="true" :header-cell-style="{background:'#eef1f6'}">
        <el-table-column prop="code" :label="$t('teachers.code')" min-width="100" :show-overflow-tooltip="true"/>
        <el-table-column prop="name" :label="$t('teachers.teacherName')" min-width="100" :show-overflow-tooltip="true"/>
        <el-table-column prop="phone" :label="$t('teachers.phone')" min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.phone" maxlength="11"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="email" :label="$t('teachers.email')" min-width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.email" maxlength="64"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div align="center" style="margin:12px 0">
        <el-button type="primary" @click="submit">{{$t('message.save')}}</el-button>
        <el-button @click="back">{{$t('message.cancel')}}</el-button>
      </div>
    </el-card>
	</div>
</template>
<script>
import { batchEditTeachers } from "common/src/api/resource/pgTeacher";


export default {
	name: "TeacherInfoEditComponent",
  props: {
    dataInfo:{
      default: null
    }
  },
	data() {
		return {
			teacherInfo: [],
		};
	},
  mounted() {
      this.getOptions();
  },
	methods: {
		getOptions() {
      this.teacherInfo = this.dataInfo || [];
		},

		back() {
			this.$emit("back", "main");
		},

    submit() {
      let infoList = this.teacherInfo;
      let regEmailExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; // 校验邮件
      let regPhoneExp = /^1[23456789]\d{9}$/; // 校验电话号码
      let emailError = infoList.filter(v=> v.email && !regEmailExp.test(v.email));
      let phoneError = infoList.filter(v=> v.phone && !regPhoneExp.test(v.phone));
      let phoneMsg = phoneError.length > 0 ? phoneError.map(v=> v.name).join(',') : '';
      let emailMsg = emailError.length > 0 ? emailError.map(v=> v.name).join(',') : '';
      if (phoneMsg.length > 0 || emailMsg.length > 0) {
        let message = phoneMsg.length > 0 ? this.$t('label.teachers')+' '+phoneMsg+' '+this.$t('teachers.phoneMsg') : '';
        let message1 = emailMsg.length > 0 ? this.$t('label.teachers')+' '+emailMsg+' '+this.$t('teachers.emailMsg') : '';
        this.$message({
          message: (message + message1),
          type: 'error',
          showClose: true,
          duration: 5000
        });
        return;
      }
      let param = [];
      infoList.forEach(item=>{
        let objItem = {
          code: item.code,
          name: item.name,
          phone: item.phone,
          email: item.email
        };
        param.push(objItem);
      });
      batchEditTeachers(param).then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t('message.editSuccess'));
          this.back();
        } else {
          this.$message.error(this.$t('teachers.eidtFailed'));
        }
      });
    }
	}
};
</script>
<style lang="scss" scoped>
</style>
